import { useState } from 'react'
import { Input, Button } from 'antd'


export default function TaskList({ tasks, onChangeTask, onDeleteTask }:any) {
    return (
        <ul>
            {tasks.map((task:any) => (
                <li key={task.id}>
                    <Task task={task} onChange={onChangeTask} onDelete={onDeleteTask} />
                </li>
            ))}
        </ul>
    )
}

function Task({ task, onChange, onDelete }:any) {
    const [isEditing, setIsEditing] = useState(false)
    let taskContent
    if (isEditing) {
        taskContent = (
            <>
                <Input
                    value={task.text}
                    onChange={(e) => {
                        onChange({
                            ...task,
                            text: e.target.value,
                        })
                    }}
                />
                <Button onClick={() => setIsEditing(false)}>Save</Button>
            </>
        )
    } else {
        taskContent = (
            <>
                {task.text}
                <Button onClick={() => setIsEditing(true)}>编辑</Button>
            </>
        )
    }
    return (
        <label>
            <Input
                type="checkbox"
                checked={task.done}
                onChange={(e) => {
                    onChange({
                        ...task,
                        done: e.target.checked,
                    })
                }}
            />
            {taskContent}
            <Button onClick={() => onDelete(task.id)}>删除</Button>
        </label>
    )
}
